<template>
    <div class="container-box">
        <div class="flex_between nav-box">
            <div class="flex_row">
                <span :class="['menu-item', { active: currentComName == link.id }]" v-for="link in links" :key="link.label"
                    v-html="link.label" @click="scrollToSection(link)" />
            </div>
            <!-- <div style="flex: 1;text-align: right;"></div> -->
        </div>
        <div class="scroll-wrap" ref="scrollWrap">
            <div class="card-container bg_linear">
                <component :is="component" :tab="tab" ref="currentComRef"/>
            </div>
            <div style="height: 60px;"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, defineExpose, getCurrentInstance } from '@vue/composition-api'
import { useStatisticalState } from '@/components/report/hooks/useStatisticalState'
const { 
    tab,
    resetStoreQuery
} = useStatisticalState()
const { proxy } = getCurrentInstance()
import component from './components/component.vue'

// 注册组件
// const components = {
//     component,
// }

// 将组件注册到当前实例
// Object.entries(components).forEach(([name, component]) => {
//     proxy.$options.components[name] = component
// })

const links = ref([
    { label: '门店', id: 'store', top: 0, active: true},
    { label: '产品', id: 'product', top: 0, active: false },
    { label: '服务', id: 'service', top: 0, active: false },
    { label: '预约', id: 'reserva', top: 0, active: false},
    { label: '客户', id: 'customer', top: 0, active: false},
    { label: '成员', id: 'member', top: 0, active: false },
])

const currentComName = ref('store')

const scrollWrap = ref()
onMounted(() => {
    initComponent()
    initData()
})

// 滚动到指定区域
function scrollToSection(link) {
    if(currentComName.value == link.id) return
    currentComName.value = link.id
    tab.value = { label: link.label, id: link.id }
    initData()
}

const initData = () => {
    try {
        resetStoreQuery()
        proxy.$refs.currentComRef?.initFc()
    } catch (error) {
        console.error(currentComName.value, "===>>>调用失败")
    }
}

// 初始化组件
const initComponent = () => {
    try {
        currentComName.value = 'store'
        tab.value = { label: '门店', id: 'store' }
    } catch (error) {
        console.error(currentComName.value, "===>>>调用失败")
    }
}

defineExpose({
    initData,
    initComponent
})
</script>

<style scoped lang="scss">
.container-box {
    box-sizing: border-box;
    padding: 10px;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #f6f4f7 0%, #faf3fb 100%);
}

.scroll-wrap {
    height: 100%;
    overflow: auto;
}

.nav-box {
    position: sticky;
    top: 0px;
    margin-bottom: 10px;
    padding: 0 10px;
    height: 55px;
    background: linear-gradient(270.09deg, hsla(0, 0%, 100%, .24) .44%, hsla(0, 0%, 100%, .85) 80.95%, hsla(0, 0%, 100%, .9) 100.95%);
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    .menu-item {
        margin: 0 5px;
        padding: 0 11px;
        cursor: pointer;
        font-size: 18px;
    }
}

.menu-item.active {
    color: #387FE5;
    font-weight: bold;
}

.card-container {
    box-sizing: border-box;
    border-radius: 6px;
    background: #fff;
    height: calc(100vh - 90px);
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid #fff;
    margin-right: 4px;
    display: flex;
}
</style>
